<template>
  <v-container class='pa-0' fluid>
    <v-data-iterator
      :items="images"
      :items-per-page.sync="itemsPerPage"
      :page.sync="page"
      :search="search"
      :sort-by="sortBy.toLowerCase()"
      :sort-desc="sortDesc"
      hide-default-footer
    >
      <template v-slot:header>
        <v-toolbar
          dark
          flat
          color='secondary'
          class=" text-center gallery_bar"
        >
          <v-text-field
            v-model="search"
            clearable
            flat
            solo-inverted
            hide-details
            prepend-inner-icon="mdi-magnify"
            label="Search"
          ></v-text-field>
          <template v-if="$vuetify.breakpoint.mdAndUp">
            <v-spacer></v-spacer>
            <v-select
              v-model="sortBy"
              flat
              solo-inverted
              hide-details
              :items="keys"
              prepend-inner-icon="mdi-magnify"
              label="排序"
            ></v-select>
            <v-spacer></v-spacer>
            <v-btn-toggle
              v-model="sortDesc"
              mandatory
            >
              <v-btn
                large
                depressed
                color="secondary"
                :value="false"
              >
                <v-icon>mdi-arrow-up</v-icon>
              </v-btn>
              <v-btn
                large
                depressed
                color="secondary"
                :value="true"
              >
                <v-icon>mdi-arrow-down</v-icon>
              </v-btn>
            </v-btn-toggle>
          </template>
        </v-toolbar>
      </template>
      <template v-slot:default="props">
        <imagesGallery
          :images='props.items'
          :card-icon='cardIcon'
          :menu-list='menuList'
          @freshList='freshList'
        />
      </template>
      <template v-slot:footer>
      </template>
    </v-data-iterator>
  </v-container>
</template>

<script>
  import imagesGallery from '@/components/album/ImagesGallery'

  export default {
    name: 'ImagesIterator',
    props: {
      images: {
        default: []
      }
    },
    components: {
      imagesGallery
    },
    data() {
      return {
        search: '',
        filter: {},
        sortDesc: false,
        page: 1,
        itemsPerPage: 256,
        sortBy: 'name',
        keys: [
          'name',
          'lastModified',
          'size'
        ],
        cardIcon: [
          {
            icon: 'mdi-bookmark',
            toolTip: '设置标签',
            func: 'showTagDialog'
          },
          {
            icon: 'mdi-information',
            toolTip: '查看详细',
            func: 'showDetail'
          }
        ],
        menuList: [
          {
            icon: 'mdi-gesture',
            toolTip: '编辑图片',
            func: 'showProcess'
          },
          {
            icon: 'mdi-delete',
            toolTip: '删除图片',
            func: 'deleteImgDialog'
          }
        ]
      }
    },
    created() {
      this.freshList()
    },
    methods: {
      freshList() {
        this.$emit('freshList')
      }
    }
  }
</script>

<style scoped>
</style>
